<template>
    <header>
        <input type="text" v-model="user.name">
        <select v-model="user.sex">
            <option :value="1">男</option>
            <option :value="2">女</option>
        </select>
        <select v-model="user.status">
            <option :value="1">正常</option>
            <option :value="2">劣迹</option>
        </select>
    </header>
  <user :name="user.name" :sex="user.sex" :status="user.status" />
</template>
<script>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import user from './components/user.vue';
export default {
    name: 'App',
    components:{
        user
    },
    data(){
        return{
            user: {
                name:'',
                status:'',
                sex:'',
            }
        }
    },
    mounted() {
    }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
    padding: 15px;
}
header{
    text-align: left;
}
input,select{
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 200px;
    margin-left: 15px;
}
</style>
